@extends('layouts.app')

@section('title', '首页')

@section('content')
<!-- Hero Section -->
<section class="hero-section py-5 mb-5" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%); border-bottom: 1px solid var(--border-color);">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="page-title mb-3">
                    {{ request()->routeIs('home') ? '探索精彩内容' : '文章列表' }}
                </h1>
                <p class="lead text-muted mb-4">
                    {{ request()->routeIs('home') ? '发现最新的技术文章、学习笔记和项目经验分享' : '浏览所有已发布的文章内容' }}
                </p>
                @if(request()->hasAny(['category', 'tag', 'search']))
                    <div class="alert alert-info d-inline-flex align-items-center">
                        <i class="bi bi-funnel me-2"></i>
                        当前筛选条件：
                        @if(request('category'))
                            <span class="badge bg-primary ms-2">分类: {{ $categories->where('slug', request('category'))->first()->name ?? request('category') }}</span>
                        @endif
                        @if(request('tag'))
                            <span class="badge bg-success ms-2">标签: {{ $tags->where('slug', request('tag'))->first()->name ?? request('tag') }}</span>
                        @endif
                        @if(request('search'))
                            <span class="badge bg-warning ms-2">搜索: {{ request('search') }}</span>
                        @endif
                    </div>
                @endif
            </div>
            <div class="col-lg-4 text-lg-end">
                <div class="stats-card p-4 bg-white rounded-3 shadow-sm">
                    <div class="row text-center">
                        <div class="col-4">
                            <div class="stat-item">
                                <h4 class="text-primary mb-1">{{ $posts->total() }}</h4>
                                <small class="text-muted">文章总数</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="stat-item">
                                <h4 class="text-success mb-1">{{ $categories->count() }}</h4>
                                <small class="text-muted">分类数量</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="stat-item">
                                <h4 class="text-warning mb-1">{{ $tags->count() }}</h4>
                                <small class="text-muted">标签数量</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container py-4">
    <!-- Advanced Filters -->
    <div class="filter-section mb-5">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-folder text-primary me-1"></i>按分类筛选
                        </label>
                        <select class="form-select form-select-lg" onchange="filterByCategory(this.value)">
                            <option value="">所有分类</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->slug }}" 
                                    {{ request('category') == $category->slug ? 'selected' : '' }}>
                                    {{ $category->name }} ({{ $category->posts_count ?? 0 }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-tags text-success me-1"></i>按标签筛选
                        </label>
                        <select class="form-select form-select-lg" onchange="filterByTag(this.value)">
                            <option value="">所有标签</option>
                            @foreach($tags as $tag)
                                <option value="{{ $tag->slug }}" 
                                    {{ request('tag') == $tag->slug ? 'selected' : '' }}>
                                    {{ $tag->name }} ({{ $tag->posts_count ?? 0 }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-3 mb-lg-0">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-sort-down text-warning me-1"></i>排序方式
                        </label>
                        <select class="form-select form-select-lg" onchange="sortPosts(this.value)">
                            <option value="latest" {{ request('sort') == 'latest' || !request('sort') ? 'selected' : '' }}>最新发布</option>
                            <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>最早发布</option>
                            <option value="title" {{ request('sort') == 'title' ? 'selected' : '' }}>标题排序</option>
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-funnel text-danger me-1"></i>操作
                        </label>
                        <div class="d-grid">
                            @if(request()->hasAny(['category', 'tag', 'search', 'sort']))
                                <a href="{{ route('posts.index') }}" class="btn btn-outline-danger">
                                    <i class="bi bi-x-circle me-1"></i>清除筛选
                                </a>
                            @else
                                <button class="btn btn-outline-secondary" disabled>
                                    <i class="bi bi-check-circle me-1"></i>无筛选条件
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Posts Grid -->
    @if($posts->count() > 0)
        <div class="posts-grid">
            <div class="row g-4">
                @foreach($posts as $index => $post)
                    <div class="col-xl-4 col-lg-6 col-md-6">
                        <article class="post-card" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                            <div class="post-image-container">
                                @if($post->cover_image_id)
                                    <img src="{{ $post->coverImage->url ?? '' }}" 
                                         class="post-image" 
                                         alt="{{ $post->title }}"
                                         loading="lazy">
                                @else
                                    <div class="post-image-placeholder">
                                        <i class="bi bi-file-text"></i>
                                    </div>
                                @endif
                                
                                <!-- Post Status Badge -->
                                @if($post->is_featured ?? false)
                                    <div class="post-badge featured">
                                        <i class="bi bi-star-fill"></i>
                                        <span>精选</span>
                                    </div>
                                @endif
                                
                                <!-- Category Badge -->
                                @if($post->category)
                                    <div class="post-badge category">
                                        <a href="{{ route('categories.show', $post->category->slug) }}">
                                            {{ $post->category->name }}
                                        </a>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="post-content">
                                <div class="post-meta">
                                    <span class="post-date">
                                        <i class="bi bi-calendar3"></i>
                                        {{ $post->published_at->format('M d, Y') }}
                                    </span>
                                    <span class="post-read-time">
                                        <i class="bi bi-clock"></i>
                                        {{ ceil(str_word_count(strip_tags($post->content)) / 200) }} 分钟阅读
                                    </span>
                                </div>
                                
                                <h3 class="post-title">
                                    <a href="{{ route('posts.show', $post->slug) }}">
                                        {{ $post->title }}
                                    </a>
                                </h3>
                                
                                @if($post->excerpt)
                                    <p class="post-excerpt">
                                        {{ Str::limit($post->excerpt, 150) }}
                                    </p>
                                @endif
                                
                                <!-- Tags -->
                                @if($post->tags->count() > 0)
                                    <div class="post-tags">
                                        @foreach($post->tags->take(3) as $tag)
                                            <a href="{{ route('tags.show', $tag->slug) }}" class="tag">
                                                #{{ $tag->name }}
                                            </a>
                                        @endforeach
                                        @if($post->tags->count() > 3)
                                            <span class="tag-more">+{{ $post->tags->count() - 3 }}</span>
                                        @endif
                                    </div>
                                @endif
                                
                                <div class="post-footer">
                                    <div class="post-author">
                                        <div class="author-avatar">
                                            <i class="bi bi-person-circle"></i>
                                        </div>
                                        <span class="author-name">{{ $post->user->name ?? '管理员' }}</span>
                                    </div>
                                    
                                    <a href="{{ route('posts.show', $post->slug) }}" class="read-more-btn">
                                        <span>阅读全文</span>
                                        <i class="bi bi-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </article>
                    </div>
                @endforeach
            </div>
        </div>
        
        <!-- Enhanced Pagination -->
        <div class="pagination-wrapper mt-5">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="pagination-info">
                        <span class="text-muted">
                            显示第 {{ $posts->firstItem() ?? 0 }} - {{ $posts->lastItem() ?? 0 }} 条，
                            共 {{ $posts->total() }} 条记录
                        </span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="pagination-nav d-flex justify-content-md-end justify-content-center">
                        {{ $posts->appends(request()->query())->links('pagination::bootstrap-4') }}
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="empty-state text-center py-5">
            <div class="empty-state-icon mb-4">
                <i class="bi bi-file-earmark-text" style="font-size: 4rem; color: var(--text-muted);"></i>
            </div>
            <h3 class="empty-state-title mb-3">
                {{ request()->hasAny(['category', 'tag', 'search']) ? '没有找到相关文章' : '暂无文章内容' }}
            </h3>
            <p class="empty-state-description text-muted mb-4">
                {{ request()->hasAny(['category', 'tag', 'search']) ? '尝试调整筛选条件或搜索其他关键词' : '还没有发布任何文章，请稍后再来查看' }}
            </p>
            @if(request()->hasAny(['category', 'tag', 'search']))
                <a href="{{ route('posts.index') }}" class="btn btn-primary">
                    <i class="bi bi-arrow-left me-2"></i>查看所有文章
                </a>
            @endif
        </div>
    @endif
</div>

@push('scripts')
<script>
function filterByCategory(slug) {
    const url = new URL(window.location);
    if (slug) {
        url.searchParams.set('category', slug);
    } else {
        url.searchParams.delete('category');
    }
    url.searchParams.delete('tag');
    window.location.href = url.toString();
}

function filterByTag(slug) {
    const url = new URL(window.location);
    if (slug) {
        url.searchParams.set('tag', slug);
    } else {
        url.searchParams.delete('tag');
    }
    url.searchParams.delete('category');
    window.location.href = url.toString();
}
</script>
@endpush
@endsection